<template>

    <div class="bg-light lter b-b wrapper-md clearfix titleBtns">
        <h2 class="m-n font-thin h4 pull-left">项目管理 > 新建项目 > Sortable</h2>
    </div>

    <div>
        <div class="wrapper-md">
            <div class="section row">
                <div class="col-md-6">
                    <h4 class="m-t-none m-b">Drag to sort list</h4>
                    <ul v-sortable="sortableOptions" class="list-group gutter list list-group-lg list-group-sp" >
                        <li v-for="item in list" class="item list-group-item bg-default">
                        <span class="pull-right">
                            <a href><i class="fa fa-pencil fa-fw m-r-xs"></i></a>
                            <a href><i class="fa fa-plus fa-fw m-r-xs"></i></a>
                            <a href><i class="fa fa-times fa-fw"></i></a>
                        </span>
                            <span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
                            <div class="clear">
                                {{item.text}}
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <h4 class="m-t-none m-b">LogOut</h4>
                    <div class="">
                        <ul class="list logList">
                            <li v-for="entry in sortingLog" track-by="$index" class="logItem">
                                {{entry}}
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="wrapper-md">
            <h4 class="m-t-none m-b">Connected items</h4>
            <div class="section row connectedItemsExample" v-sortable="sortableOptions1">
                <div class="col-md-6">
                    <ul class="list-group gutter list-group-lg list-group-sp list" >
                        <li v-for="item in leftArray" class="list-group-item bg-default">
                            <span class="pull-right">
                                <a href><i class="fa fa-pencil fa-fw m-r-xs"></i></a>
                                <a href><i class="fa fa-plus fa-fw m-r-xs"></i></a>
                                <a href><i class="fa fa-times fa-fw"></i></a>
                            </span>
                            <span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
                            <div class="clear">
                                {{item.text}}
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="col-md-6">
                    <ul class="list-group gutter list-group-lg list-group-sp list" >
                        <li v-for="item in rightArray" class="list-group-item bg-default">
                            <span class="pull-right">
                                <a href><i class="fa fa-pencil fa-fw m-r-xs"></i></a>
                                <a href><i class="fa fa-plus fa-fw m-r-xs"></i></a>
                                <a href><i class="fa fa-times fa-fw"></i></a>
                            </span>
                            <span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
                            <div class="clear">
                                {{item.text}}
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</template>
<style>

</style>
<script>

    import lang from 'lodash/lang'

    export default {        //这里是官方的写法，默认导出，ES6
        data () {           //ES6，等同于data:function(){}
            return {        //必须使用这样的形式，才能创建出单一的作用域
                list:[],
                leftArray:[],
                rightArray:[],
                middleArr:[],
                sortingLog:[],
                sortableOptions:{},
                sortableOptions1:{}
            }
        },
        created () {

            this.leftArray = this.buildArray('Left', 5);
            this.rightArray = this.buildArray('Right', 7);

            var that = this;

            var tmpList = [];

            for (var i = 1; i <= 6; i++){
                tmpList.push({
                    text: 'Item ' + i,
                    value: i
                });
            }

            this.middleArr = tmpList.map(function(v,i){
                return v.value;
            });

            this.list = tmpList;

            this.sortableOptions = {
                animation: 150,
                filter: '.fa-times',
//                draggable:'.list',
                onFilter: function (evt) {
                    var el = this.closest(evt.item);
                    el && el.parentNode.removeChild(el);
                },
                onStart: function (evt) {
                    evt.oldIndex;
                },
                onUpdate: function(evt) {
                        //console.log(evt);

                        var logEntry = that.middleArr.map(function (v) {
                            return v;
                        }).join(', ');
                        that.sortingLog.push('Update: ' + logEntry);
                },
                onEnd: function (evt) {

                    //console.log(evt.oldIndex);
                    //console.log(evt.newIndex);

                    var temp = that.middleArr[evt.oldIndex];

                    that.middleArr.splice(evt.oldIndex,1);

                    that.middleArr.splice(evt.newIndex,0,temp);

                    console.log(that.middleArr);

                    that.sortingLog.push('Stop: ' + that.middleArr);

                }
            }

            this.sortableOptions1 = {
                animation: 150,
                filter: '.fa-times',
//                draggable:'.list',
                onFilter: function (evt) {
                    var el = this.closest(evt.item); // get dragged item
                    el && el.parentNode.removeChild(el);
                }
            }

        },
        ready () {

        },
        methods :{
            buildArray (name, size) {
                var i, array = [];
                for (i = 1; i <= size; i++){
                    array.push({
                        text: name + ' ' + i ,
                        value: i
                    });
                }
                return array;
            }
        },
        components: {

        },
        directives:{

        }
    }

</script>
